home *** CD-ROM | disk | FTP | other *** search
/ PC World Komputer 2010 April / PCWorld0410.iso / pluginy Firefox / 1419 / 1419.xpi / chrome / content / ietabDrag.js next >
Encoding:
Text File  |  2006-12-04  |  8.0 KB  |  192 lines
  1. // Status bar drag and drop functionality based off of example code from
  2. // http://kb.mozillazine.org/Dev_:_Extensions_:_Example_Code_:_Adding_Drag_and_Drop_to_Statusbarpanel
  3. //
  4.  
  5. const gIetab_flavour = "ie_tab/statusbarpanel";
  6. const gIetab_statusbarPanel = "ietab-status-deck";
  7. const gIetab_statusbar = "status-bar";
  8.  
  9. const ietab_statObserver = {
  10.   init: function () {
  11.     var statusbarPanel = document.getElementById(gIetab_statusbarPanel);
  12.     var insertbefore = statusbarPanel.getAttribute("insertbefore");
  13.     var insertafter = statusbarPanel.getAttribute("insertafter");
  14.  
  15.     // if insertbefore or insertafter attributes are set obey the settings and
  16.     // place our statusbar panel before or after the specified panel
  17.     if (insertbefore) {
  18.       document.getElementById(gIetab_statusbar).
  19.                insertBefore(statusbarPanel,
  20.                             document.getElementById(statusbarPanel.getAttribute("insertbefore")));
  21.     }
  22.     else if (insertafter) {
  23.       var prev = document.getElementById(statusbarPanel.getAttribute("insertafter"));
  24.       if (prev) prev = prev.nextSibling;
  25.       if (prev)
  26.         document.getElementById(gIetab_statusbar).insertBefore(statusbarPanel, prev);
  27.       else
  28.         document.getElementById(gIetab_statusbar).appendChild(statusbarPanel);
  29.     }
  30.   },
  31.  
  32.   getSupportedFlavours: function () {
  33.     var flavours = new FlavourSet();
  34.     flavours.appendFlavour(gIetab_flavour);
  35.     return flavours;
  36.   },
  37.  
  38.   // when user begins to drag, make sure every statusbarpanel has an id and
  39.   // set up the event handlers for the drag and drop
  40.   //
  41.   onDragStart: function (evt,transferData,action) {
  42.     var elme = evt.target;
  43.     while(elme.id != gIetab_statusbarPanel) {
  44.       elme =elme.parentNode;
  45.     }
  46.     var txt=elme.getAttribute("id");
  47.     transferData.data=new TransferData();
  48.     transferData.data.addDataForFlavour(gIetab_flavour,txt);
  49.     var status = document.getElementById(gIetab_statusbarPanel);
  50.     var statusbar = document.getElementById(gIetab_statusbar);
  51.     statusbar.setAttribute("ietabdrag", true);
  52.     var child = statusbar.firstChild;
  53.     var x = 0;
  54.     while (child) {
  55.       if (child != status) {
  56.         // make sure every panel has an id and make that id persistent.  For some reason
  57.         // the persist attribute isn't sticking.  I'm not sure why but this could cause problems.
  58.         if (!child.id) {
  59.           var newId = "statusbarpanel-noID"+x;
  60.           while (document.getElementById(newId)) newId += "x"+x;
  61.           child.id = newId;
  62.           child.setAttribute("persist", new String("id" + (child.persist ? " "+child.persist : "")) );
  63.           x++;
  64.         }
  65.         child.addEventListener("dragover", function(event) { nsDragAndDrop.dragOver(event,ietab_statObserver); }, false);
  66.         child.addEventListener("dragdrop", function(event) { nsDragAndDrop.drop(event,ietab_statObserver); }, false);
  67.       }
  68.       child = child.nextSibling;
  69.     }
  70.     // this will restore status bar to previous state if user does not drop on status bar
  71.     window.addEventListener("dragexit", function(event) { nsDragAndDrop.dragExit(event,ietab_statObserver); }, true);
  72.   },
  73.  
  74.  
  75.   // clean up when release mouse without dropping on statusbar
  76.   //
  77.   onDragExit: function(evt, session) {
  78.     var elm = session.sourceNode;
  79.     while(elm.parentNode.nodeName.toLowerCase() != "statusbar") {
  80.       elm = elm.parentNode;
  81.     }
  82.     if (elm == document.getElementById(gIetab_statusbarPanel)) this.scheduleCleanup();
  83.   },
  84.  
  85.   // highlite the spot where the drop will occur
  86.   //
  87.   onDragOver: function (evt,flavour,session) {
  88.     var elm = evt.target;
  89.     while(elm.parentNode.nodeName.toLowerCase() != "statusbar") {
  90.       elm = elm.parentNode;
  91.     }
  92.  
  93.     // remove indicator from previous and next siblings
  94.     var prev = (elm.previousSibling != session.sourceNode) ? elm.previousSibling : elm.previousSibling.previousSibling;
  95.     var next = (elm.nextSibling!= session.sourceNode) ? elm.nextSibling : elm.nextSibling.nextSibling;
  96.     if (prev) prev.removeAttribute("ietabdrag");
  97.     if (next) next.removeAttribute("ietabdrag");
  98.  
  99.     // this will display a little line where the drop will occur
  100.     var midPointCoord = elm.boxObject.x + (elm.boxObject.width/2);      // the offset + midpoint
  101.     midPointCoord += !elm.previousSibling ? (elm.boxObject.width/4) :   // + additional quarter-coverage for left-most panel
  102.                      (!elm.nextSibling ? (-elm.boxObject.width/4) : 0); // - less quarter-coverage for right-most panel
  103.     if (evt.clientX < midPointCoord)
  104.       elm.setAttribute("ietabdrag", "left");
  105.     else
  106.       elm.setAttribute("ietabdrag", "right");
  107.   },
  108.  
  109.   // move the icon to the dropped location and save the location for future sessions
  110.   //
  111.   onDrop: function (evt,dropdata,session) {
  112.     if (dropdata.data!="") {
  113.  
  114.       var droppedPanel = document.getElementById(dropdata.data);
  115.       var parent = droppedPanel.parentNode;
  116.       var prev = evt.target;
  117.       while (prev.nodeName.toLowerCase() != "statusbarpanel") {
  118.         prev = prev.parentNode;
  119.       }
  120.  
  121.       // this allows user to drop before or after the object under the mouse pointer depending on
  122.       // where the actual drop occurs.
  123.       var midPointCoord = prev.boxObject.x + (prev.boxObject.width/2); // the offset + midpoint
  124.       midPointCoord += !prev.previousSibling ? (prev.boxObject.width/4) : // + additional quarter-coverage for left-most panel
  125.                        (!prev.nextSibling ? (-prev.boxObject.width/4) : 0); // - less quarter-coverage for right-most panel
  126.       if (evt.clientX < midPointCoord)
  127.         prev = prev.previousSibling;
  128.       var next = (!prev) ? parent.firstChild : (prev.nextSibling != droppedPanel) ?
  129.                                                 prev.nextSibling : prev.nextSibling.nextSibling;
  130.  
  131.       // store the insertbefore or insertafter attribute.  Our overlay is set up so
  132.       // that both these attributes will persist between browser sessions.
  133.       if (prev) {
  134.         droppedPanel.removeAttribute("insertbefore");
  135.         droppedPanel.setAttribute("insertafter",""+prev.getAttribute("id"));
  136.       }
  137.       else if (next) {
  138.         droppedPanel.removeAttribute("insertafter");
  139.         droppedPanel.setAttribute("insertbefore",""+next.getAttribute("id"));
  140.       }
  141.  
  142.       // do the actual move
  143.       parent.removeChild(droppedPanel);
  144.       if (next)
  145.         parent.insertBefore(droppedPanel,next);
  146.       else
  147.         parent.appendChild(droppedPanel);
  148.  
  149.       this.cleanUp();
  150.     }
  151.   },
  152.  
  153.   // calling cleanUp directly fires immediately so use this to get around that
  154.   //
  155.   scheduleCleanup: function(evt) {
  156.     clearTimeout(window.ietabDragCleanup);
  157.     window.ietabDragCleanup = setTimeout('ietab_statObserver.cleanUp();',700);
  158.   },
  159.  
  160.   // restore the statusbar to its normal state
  161.   //
  162.   cleanUp: function() {
  163.     clearTimeout(window.ietabDragCleanup);
  164.  
  165.     var statusbar = document.getElementById(gIetab_statusbar);
  166.     var statusbarPanel = document.getElementById(gIetab_statusbarPanel);
  167.     statusbar.removeAttribute("ietabdrag");
  168.  
  169.     // remove the event handlers
  170.     var child = statusbar.firstChild;
  171.     var x = 0;
  172.     while (child) {
  173.       if (child != statusbarPanel) {
  174.         child.removeAttribute("ietabdrag");
  175.         child.removeEventListener("dragover", function(event) { nsDragAndDrop.dragOver(event,ietab_statObserver); }, false);
  176.         child.removeEventListener("dragdrop", function(event) { nsDragAndDrop.drop(event,ietab_statObserver); }, false);
  177.       }
  178.       child = child.nextSibling;
  179.     }
  180.     window.removeEventListener("dragexit", function(event) { nsDragAndDrop.dragExit(event,ietab_statObserver); }, true);
  181.   },
  182.  
  183.   destory: function() {
  184.     window.removeEventListener('load', ietab_statObserver.init, false);
  185.     window.removeEventListener('load', ietab_statObserver.destory, false);
  186.   }
  187. };
  188.  
  189. // its go time
  190. window.addEventListener('load', ietab_statObserver.init, false);
  191. window.addEventListener('unload', ietab_statObserver.destory, false);
  192.